<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <#include "head/common-css.ftl" />
    <#include "head/extend-js.ftl" />
    <!-- JS代码 -->
    <script type="text/javascript">
        function show_box(id) {
            jQuery('.widget-box.visible').removeClass('visible');
            jQuery('#' + id).addClass('visible');
        }

        $(function () {

            //验证英文字母和数字
            jQuery.validator.addMethod("checkENGNUM", function (value, element) {
                var reg = /^[0-9a-zA-Z]+$/;
                return this.optional(element) || reg.test(value);
            }, "请输入正确的英文字母或数字！");

            // 用户登录校验
            $('#login-form').validate({
                rules: {
                    u_loginname: {
                        required: true
                    },
                    u_password: "required"
                },
                messages: {
                    u_loginname: {
                        required: "登录名必填",
                    },
                    u_password: '密码必填'
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                },
                success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                    $(e).remove();
                },
                submitHandler: function (form) {
                    //进行ajax传值
                    $.ajax({
                        url: "login.do",
                        type: "post",
                        dataType: "json",
                        data: {
                            loginName: $("#u_loginname").val(),
                            loginPassword: $("#u_password").val()
                        },
                        success: function (msg) {
                            //要执行的代码
                            if (!msg.success) {
                                layer.msg(msg.msg);
                                return;
                            }
                            //登录成功跳转页面
                            window.location.href = "index.htm";
                        }
                    });
                }
            });

            // 用户注册校验
            $('#reg-form').validate({
                rules: {
                    login_name: {
                        required: true,
                        minlength: 5
                    },
                    login_pwd: {
                        required: true,
                        minlength: 5
                    },
                    re_login_pwd: {
                        required: true,
                        minlength: 5,
                        equalTo: "#login_pwd"
                    }
                },
                messages: {
                    login_name: {
                        required: '用户名必填',
                        minlength: '用户名最小五位'
                    },
                    login_pwd: {
                        required: '密码必填',
                        minlength: '用户名最小五位'
                    },
                    re_login_pwd: {
                        equalTo: "两次密码不相同"
                    }
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                },
                success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                    $(e).remove();
                },
                submitHandler: function (form) {
                    //进行ajax传值
                    $.ajax({
                        url: "/doRegist.do",
                        type: "post",
                        dataType: "json",
                        contentType: 'application/json',
                        data: JSON.stringify({
                            loginName: $("#login_name").val(),
                            loginPwd: $("#login_pwd").val(),
                            type: 1
                        }),
                        success: function (msg) {
                            //要执行的代码
                            if (!msg.success) {
                                layer.msg(msg.msg, {icon: 2});
                                return;
                            }
                            // 注册成功,跳转到学员信息补全页面
                            window.location.href = "index.htm";
                        }
                    });
                }
            });
        })
    </script>
</head>

<body class="login-layout">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <div class="space-6"></div>
                        <h1>
                            <i class="icon-leaf green"></i>
                            <span class="red">学员信息</span>
                            <span class="white">管理系统</span>
                        </h1>
                        <h4 class="blue">&copy; 牛耳教育</h4>
                    </div>

                    <div class="space-6"></div>

                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <i class="icon-coffee green"></i>
                                        请登录...
                                    </h4>
                                    <div class="space-6"></div>
                                    <form id="login-form">
                                        <fieldset>
                                            <div class="form-group">
                                                <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="text" class="form-control" id="u_loginname"
                                                           name="u_loginname" placeholder="请输入用户名..."/>
                                                    <i class="icon-user"></i>
                                                </span>
                                                </label>
                                            </div>

                                            <div class="form-group">
                                                <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="password" class="form-control" placeholder="请输入密码..."
                                                           name="u_password" id="u_password"/>
                                                    <i class="icon-lock"></i>
                                                </span>
                                                </label>
                                            </div>

                                            <div class="space"></div>
                                            <div class="clearfix">
                                                <label class="inline">
                                                    <input type="checkbox" class="ace" name="rememberMe"/>
                                                    <span class="lbl"> 记住</span>
                                                </label>

                                                <button type="submit"
                                                        class="width-35 pull-right btn btn-sm btn-primary">
                                                    <i class="icon-key"></i>
                                                    登录
                                                </button>
                                            </div>

                                            <div class="space-4"></div>
                                        </fieldset>
                                    </form>

                                </div><!-- /widget-main -->

                                <div class="toolbar clearfix center">
                                    <div>
                                        <a href="#" onclick="show_box('signup-box'); return false;"
                                           class="user-signup-link">
                                            注册
                                        </a>
                                    </div>
                                </div>
                            </div><!-- /widget-body -->
                        </div><!-- /login-box -->

                        <div id="signup-box" class="signup-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header green lighter bigger">
                                        <i class="icon-group blue"></i>
                                        新用户注册
                                    </h4>
                                    <form id="reg-form">
                                        <fieldset>
                                            <div class="form-group">
                                                <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="text" class="form-control" id="login_name"
                                                           name="login_name"
                                                           placeholder="登录名..."/>
                                                    <i class="icon-user"></i>
                                                </span>
                                                </label>
                                            </div>
                                            <div class="form-group">
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="password" class="form-control" id="login_pwd"
                                                               name="login_pwd"
                                                               placeholder="登录密码..."/>
                                                        <i class="icon-lock"></i>
                                                    </span>
                                                </label>
                                            </div>
                                            <div class="form-group">
                                                <label class="block clearfix">
                                                <span class="block input-icon input-icon-right">
                                                    <input type="password" class="form-control" id="re_login_pwd"
                                                           name="re_login_pwd"
                                                           placeholder="确认密码..."/>
                                                    <i class="icon-retweet"></i>
                                                </span>
                                                </label>
                                            </div>
                                            <div class="space-6"></div>
                                            <div class="clearfix">
                                                <button type="reset" class="width-30 pull-left btn btn-sm">
                                                    <i class="icon-refresh"></i>
                                                    重置
                                                </button>
                                                <button type="submit"
                                                        class="width-65 pull-right btn btn-sm btn-success">
                                                    注册
                                                    <i class="icon-arrow-right icon-on-right"></i>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <div class="toolbar center">
                                    <a href="#" onclick="show_box('login-box'); return false;"
                                       class="back-to-login-link">
                                        <i class="icon-arrow-left"></i>
                                        返回登录
                                    </a>
                                </div>
                            </div><!-- /widget-body -->
                        </div><!-- /signup-box -->
                    </div><!-- /position-relative -->
                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</div><!-- /.main-container -->
</body>
</html>
